<script lang="ts" setup name="Goods">
import { watch, ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

import useStore from "@/store";

import GoodsImage from "./components/goods-image.vue";
import GoodsSales from "./components/goods-sales.vue";
import GoodsName from "./components/goods-name.vue";
import GoodsSku from "./components/goods-sku.vue";
import GoodsDetail from "./components/goods-detail.vue";
import GoodsHot from "./components/goods-hot.vue";

const { goods, user, cart } = useStore();
const route = useRoute();

watch(
  () => route.params.id,
  () => {
    const id = route.params.id;
    if (!id) return;
    if (route.fullPath === `/goods/${id}`) {
      goods.getGoodsInfo(id as string);
    }
  },
  { immediate: true }
);

// 获取子组件传递过来的skuId的值
let _skuId = "";
const changeSku = (skuId: string) => {
  _skuId = skuId;
  const sku = goods.info.skus.find((item) => item.id === skuId);

  if (sku) {
    goods.info.oldPrice = sku.oldPrice;
    goods.info.price = sku.price;
    goods.info.inventory = sku.inventory;
  }
};

const count = ref(1);
// 加入购物车
const addToCart = () => {
  if (!_skuId) {
    ElMessage.warning("请选择完成的规格参数");
    return;
  }
  // console.log("---skuId---count---", _skuId, count.value);

  if (!user.isLogin) {
    ElMessage.warning("请先登录!");
    return;
  }

  cart.addToCart({ skuId: _skuId, count: count.value });
  ElMessage.success("加入购物车成功~");
};
</script>

<template>
  <div class="xtx-goods-page">
    <div class="container" v-if="goods.info.name">
      <!-- 面包屑 -->
      <el-breadcrumb separator=">" style="height: 50px; line-height: 50px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: `/category/${goods.info.categories?.[1].id}` }"
          >{{ goods.info.categories?.[1].name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: `/category/sub/${goods.info.categories?.[0].id}` }"
          >{{ goods.info.categories?.[0].name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ goods.info.name }}</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 商品信息 -->

      <div class="goods-info">
        <div class="media">
          <GoodsImage :images="goods.info.mainPictures"></GoodsImage>
          <GoodsSales></GoodsSales>
        </div>
        <div class="spec">
          <GoodsName :goods="goods.info"></GoodsName>
          <!-- 规格组件 -->
          <GoodsSku :goods="goods.info" @changeSku="changeSku"></GoodsSku>
          <div>
            <span
              style="
                width: 50px;
                color: #999;
                margin-left: 10px;
                margin-right: 16px;
              "
            >
              数量
            </span>
            <el-input-number v-model="count" :min="1" />
          </div>
          <el-button
            style="
              margin-top: 20px;
              width: 180px;
              height: 50px;
              margin-left: 5px;
            "
            type="primary"
            size="large"
            @click="addToCart"
            >加入购物车</el-button
          >
        </div>
      </div>

      <!-- 商品详情 -->
      <div class="goods-footer">
        <div class="goods-article">
          <!-- 商品+评价 -->
          <div class="goods-tabs">
            <GoodsDetail :goods="goods.info"></GoodsDetail>
          </div>
        </div>
        <!-- 24热榜+专题推荐 -->
        <div class="goods-aside">
          <GoodsHot :type="1" />
          <GoodsHot :type="2" />
          <GoodsHot :type="3" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 400;
}

:deep(.el-breadcrumb__inner a) {
  font-weight: 400;
}
</style>
